<template>
	<view class="login_bg">
		<view class="like_top">
			<view class="back">
				<view class="back_img" @click="personal()"><image src="../../static/images/left.png" mode="widthFix"></image></view>
			</view>
			<p class="like">会员中心</p>
		</view>
		
		<view class="menuList">
			<!-- <view :class="(currIndex==index) ? 'curr' : ''" v-for="(item,index) in menuList1" @click="catchTab(index)"> -->
				<view :class="(currIndex==index) ? 'curr' : ''"  v-for="(small,index) in menuList1" :key="index"  @click="catchTab(index)">
					<image :src="small.imgUrl" :class="[index == current ? 'active' : '']" class="ss"></image>
				</view>
			<!-- </view> -->
		</view>
		
		<view>
			<swiper class="swiper" :circular="false" :indicator-dots="true" :autoplay="false"
			    :duration="duration" v-show="bannerEable"  indicator-active-color="white">
				<swiper-item class="swiper_01">
					<view class="vip"><image src="../../static/images/w270_h270_qm.png" mode="widthFix"></image></view>
					<view class="vip_right">
						<view class="vip_name_pic">
							<view class="vip_name">小骚货</view>
							<view class="vip_pic"><image src="../../static/images/icon_novip-6f35b79a.png" mode="widthFix"></image></view>
						</view>
						<view class="vip_txt">开通会员后享多项权益</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper_02">
					<view class="vip"><image src="../../static/images/w270_h270_qm.png" mode="widthFix"></image></view>
					<view class="vip_right">
						<view class="vip_name_pic">
							<view class="vip_namee">小骚货</view>
							<view class="vip_pic"><image src="../../static/images/icon_nosvip-95fcf490.png" mode="widthFix"></image></view>
						</view>
						<view class="vip_txtt">开通SVIP后享多项权益</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view>
		   <scroll-view class="scroll-view" scroll-x="true">
		     <view class="scroll-item" :key="index">
						  <view class="time">1个月</view>
						  <view class="money"><view class="rmb">￥</view><view class="mun">198</view></view>
						  <view class="youhui">折合6.6/天</view>
					  </view>
		     <view class="scroll-item" :key="index">
		     		<view class="time">1个月</view>
		     		<view class="money"><view class="rmb">￥</view><view class="mun">198</view></view>
		     		<view class="youhui">折合6.6/天</view>
		     </view>
		     <view class="scroll-item" :key="index">
		     		<view class="time">1个月</view>
		     		<view class="money"><view class="rmb">￥</view><view class="mun">198</view></view>
		     		<view class="youhui">折合6.6/天</view>
		     </view>
			<view class="scroll-item" :key="index">
					<view class="time">1个月</view>
					<view class="money"><view class="rmb">￥</view><view class="mun">198</view></view>
			        <view class="youhui">折合6.6/天</view>
			</view>
		   </scroll-view>
		 </view>
		<view v-show="currIndex==0">
		 	<view class="vip_img"><image src="../../static/images/icon-me-VIP-title2-9843e6f6.png" mode="widthFix"></image></view>
		 	<view class="vip_qy">
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/vip_ico1.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">免费畅聊</view>
		 				<view class="vip_qy_list_cll">每日免费解锁10位女士</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/vip_ico2.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">无限查看</view>
		 				<view class="vip_qy_list_cll">无限次查看资料</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/vip_ico3.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">VIP身份</view>
		 				<view class="vip_qy_list_cll">VIP标识更容易获得关注</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/vip_ico4.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">首页推荐</view>
		 				<view class="vip_qy_list_cll">获得优先推荐，被更多异性看到</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/vip_ico5.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">专属新人频道</view>
		 				<view class="vip_qy_list_cll">可查看新入驻女士</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/vip_ico6.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">谁看过我</view>
		 				<view class="vip_qy_list_cll">查看全部访客的个人资料</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/vip_ico7.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">免费发动态</view>
		 				<view class="vip_qy_list_cll">无限次发布动态</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/vip_ico8.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">位置漫游</view>
		 				<view class="vip_qy_list_cll">可漫游到任意城市</view>
		 			</view>
		 		</view>
		 	</view>
		</view>
		<view v-show="currIndex==1">
		 	<view class="vip_img"><image src="../../static/images/icon-me-SVIP-title2-94dac08b.png" mode="widthFix"></image></view>
		 	<view class="vip_qy">
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/svip_ico1.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">专属SVIP尊享</view>
		 				<view class="vip_qy_list_cll">更快获得海量高颜女士的关注</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/svip_ico2.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">定制筛选</view>
		 				<view class="vip_qy_list_cll">更快找到心仪女士</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/svip_ico3.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">免费畅聊</view>
		 				<view class="vip_qy_list_cll">每日免费解锁15位女士</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/svip_ico4.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">无限查看</view>
		 				<view class="vip_qy_list_cll">无限次查看资料</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/svip_ico5.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">SVIP身份</view>
		 				<view class="vip_qy_list_cll">高级SVIP标识彰显尊贵身份</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/svip_ico6.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">首页推荐</view>
		 				<view class="vip_qy_list_cll">获得优先推荐，被更多异性看到</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/svip_ico7.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">专属新人频道</view>
		 				<view class="vip_qy_list_cll">可查看新入驻女士</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/svip_ico8.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">谁看过我</view>
		 				<view class="vip_qy_list_cll">查看全部访客的个人资料</view>
		 			</view>
		 		</view>
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/svip_ico9.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">免费发动态</view>
		 				<view class="vip_qy_list_cll">无限次发布动态</view>
		 			</view>
		 		</view>
		 		
		 		<view class="vip_qy_list">
		 			<view class="vip_qy_list_pic"><image src="../../static/images/svip_ico10.png" mode="widthFix"></image></view>
		 			<view class="vip_qy_list_right">
		 				<view class="vip_qy_list_cl">位置漫游</view>
		 				<view class="vip_qy_list_cll">可漫游到任意城市</view>
		 			</view>
		 		</view>
		 	</view>
		 </view>
		 <view class="buy_btn">
		 	<view class="buy">
		 		<view class="buyyy" @click="toggle('center')">
		 			<view class="buyy">
		 				<view class="buy_txt">
		 					<view class="buy_txt_left"><text>开通</text><text>1</text><text>个月会员</text></view>
		 					<view class="buy_txt_right"><text>折合</text><text>￥6.6</text><text>/天</text></view>
		 				</view>
		 				<view class="hy_xy">成为会员即表示同意《会员服务协议》</view>
		 			</view>
		 			<view class="buy_btnn"><image src="../../static/images/icon-me-SVIP-buy-btn-d039c68b.png" mode="widthFix"></image></view>
		 		</view>
		 		
		 	</view>
		</view>
		 <uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" @change="change" >
			<view class="pay">
				<view @click="closePopup"><image src="../../static/images/close.png" mode="widthFix" class="imgs"></image></view>
				<view class="times">兑换1个月</view>
				<view class="price">￥198</view>
				<view class="_popBottom_6kfau_41">
					<view class="_payItems_6kfau_45">
						<view class="_payPart_6kfau_48 _item_6kfau_73">
							<view class="_partLeft_6kfau_55">
								<image class="_wechatIcon_6kfau_59" src="../../static/images/wechat.png" mode="widthFix"></image>
								<span>微信支付</span>
							</view>
							<image class="_check_6kfau_69" src="../../static/images/icon_check-9358e36a.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="_btnCon_6kfau_77">
					<view class="_button_1202d_1" style="width: auto; height: 12vw; background: linear-gradient(268deg, rgb(0, 136, 234) 0%, rgb(45, 244, 197) 100%);">确认</view>
				</view>
			</view>
		 </uni-popup>
		 
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
			// indicatorDots:true,
			autoplay:true,
			interval:5000,
			duration:500,
			bannerEable:true,
			bs:false,
			isCheckeddd:false,
			menuList1:['VIP','SVIP'],
		    currIndex:0,
			currIndex1:0,
			isPopupShow: false,
			type: 'center',
            list:[
				{text:'1个月', style:"color:white"},
				{text:'1个月', style:"color:#fff"},
				{text:'2个月', Style:'style1'},
				{text:'2个月', Style:'style1'},
			], // '列表数据
				startX: 0, // 触摸开始的X坐标
				endX: 0, // 触摸结束的X坐标
				offsetX: 0, // 位移量
				menuList1:[
				    {id:0,imgUrl:"http://wp.huaxijiance.com/hy1.png"},                
					{id:1,imgUrl:"http://wp.huaxijiance.com/hy02.png"},        			
				],
			}
		},
			methods: {
				   toggle(type) {
						this.type = type
						// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
						this.$refs['popup'].open();
					},
					catchTab(index){
						this.currIndex = index
					},
					catchTabb(index1){
						this.currIndex1 = index1
					},	
					closePopup(){
						this.$refs.popup.close()
					},			  
			   },
			touchStart(event) {
			    this.startX = event.touches[0].clientX;
			   },
			touchMove(event) {
				this.endX = event.touches[0].clientX;
				this.offsetX = this.endX - this.startX;
				// 防止页面滚动
				event.preventDefault();
			},
			touchEnd(event) {
				// 处理滑动逻辑，例如更新列表位置等
				// this.offsetX 为位移量，可以用来判断滑动方向和距离
			},
				
	}
</script>

<style>
  @import "../../static/css/huiyuan.css";
  
</style>
